/*
* 个人中心主界面路由容器组件
* */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Result, List, WhiteSpace, Button, Modal} from 'antd-mobile'

import Cookies from 'js-cookie'
import {resetUser} from '../../redux/actions'



const Item = List.Item
const Brief = Item.Brief

class Personal extends Component{

    // 退出登录
    logout = () => {
        // alert('----------')
        Modal.alert('退出', '确定退出登录吗?', [
            {text: '取消'},
            {
                text: '确定',
                onPress: () => { // 退出登录
                    // 1. 删除cookie中的userid
                    Cookies.remove('userid')
                    // 2. 删除redux管理的user   -- 不需要跟后台进行通信
                    // 用一个同步action就行
                    this.props.resetUser()
                }
            }
        ])
    }

    render() {
    const {username, type, info, header, belongClass, school, degree} = this.props.user
    return (
      <div style={{marginBottom:5, marginTop:5}} >
        <Result
          img={<img src={require(`../../assets/images/${header}.png`)} style={{width: 50}} alt="header"/>}
          title={username}
          message={school}
          className='yonghutouxiang'
        />

        <List renderHeader={() => '相关信息'}>
          <Item multipleLine>
            <Brief>班级: {belongClass}</Brief>
            <Brief>简介: {info}</Brief>
            {degree ? <Brief>学历: {degree}</Brief> : null}
          </Item>
        </List>
        <WhiteSpace/>
        <List>
          <Button type='warning' onClick={this.logout}>退出登录</Button>
        </List>
      </div>
    )
  }
}
/*
* 最终向外暴露的是向外产生的容器组件
* */
export default connect(
    state => ({user: state.user}),
    {resetUser}
)(Personal)